<template>
  <yd-layout title="DateTime">

    <yd-cell-group title="常规"
                   class="demo-small-pitch">
      <yd-cell-item arrow>
        <span slot="left">Time：</span>
        <yd-datetime type="time"
                     v-model="datetime1"
                     slot="right"></yd-datetime>
      </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left">Day：</span>
        <yd-datetime type="day"
                     v-model="datetime2"
                     slot="right"></yd-datetime>
      </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left">Month：</span>
        <yd-datetime type="month"
                     v-model="datetime3"
                     slot="right"></yd-datetime>
      </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left">Date：</span>
        <yd-datetime type="date"
                     v-model="datetime4"
                     slot="right"></yd-datetime>
      </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left">DateTime：</span>
        <yd-datetime type="datetime"
                     v-model="datetime5"
                     slot="right"></yd-datetime>
      </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left">DateTimeFull：</span>
        <yd-datetime type="datetime_full"
                     v-model="datetime10"
                     slot="right"></yd-datetime>
      </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left">自定义模板：</span>
        <yd-datetime type="date"
                     :yearFormat="yearFormat"
                     :monthFormat="monthFormat"
                     :dayFormat="dayFormat"
                     v-model="datetime6"
                     slot="right"></yd-datetime>
      </yd-cell-item>
    </yd-cell-group>

    <yd-cell-group title="可选时间"
                   class="demo-small-pitch">
      <yd-cell-item arrow>
        <span slot="left">开始/结束年份：</span>
        <yd-datetime startYear="1990"
                     endYear="2020"
                     type="date"
                     v-model="datetime7"
                     slot="right"></yd-datetime>
      </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left">开始/结束小时：</span>
        <yd-datetime startHour="9"
                     endHour="18"
                     type="time"
                     v-model="datetime8"
                     slot="right"></yd-datetime>
      </yd-cell-item>
    </yd-cell-group>

    <yd-cell-group title="限制时间"
                   class="demo-small-pitch">
      <yd-cell-item arrow>
        <span slot="left">时间段范围：</span>
        <yd-datetime ref="datetime"
                     startDate="2012-03-16 15:13"
                     endDate="2019-10-21 22:21"
                     v-model="datetime9"
                     slot="right"></yd-datetime>
      </yd-cell-item>
      <p slot="bottom"
         class="demo-cell-bottom-tip">( 2012-03-16 15:13 ~ 2019-10-21 22:21 )</p>
    </yd-cell-group>

    <yd-button-group>
      <yd-button size="large"
                 @click.native="open">手动打开</yd-button>
    </yd-button-group>
  </yd-layout>
</template>

<script type="text/babel">
export default {
  data() {
    return {
      datetime1: '12:18',
      datetime2: '2018-03-29',
      datetime3: '2018-03-29',
      datetime4: '2018-03-29',
      datetime5: '2016-06-06 06:06',
      datetime6: '2017-05-11',
      datetime7: '',
      datetime8: '10:20',
      datetime9: '',
      datetime10: '2016-06-06 06:06:02',
      yearFormat: '<span style="color:#F00;">{value}<i style="font-size: 12px;margin-left: 1px;">年</i></span>',
      monthFormat: '<span style="color:#0BB20C;">{value}<i style="font-size: 12px;margin-left: 1px;">月</i></span>',
      dayFormat: '<span style="color:#FFB400;">{value}<i style="font-size: 12px;margin-left: 1px;">日</i></span>'
    };
  },
  methods: {
    open() {
      this.$refs.datetime.open();
    }
  }
};
</script>
